<template>
  <div class="home-housekeeping">
    <div class="big">
      <!-- 顶部导航栏 -->
      <mt-header fixed>
        <router-link to="/homepage"
                     slot="left">
          <mt-button class="nav-serve"
                     icon="back">找家政服务</mt-button>
        </router-link>
      </mt-header>
      <!-- 中间内容区域 -->
      <div class="content">
        <div class="public">
          <div class="content-seek"></div>找家政
          <div class="content-option">
            <div class="content-seek-list"
                 v-for="(item, index) in content"
                 :key="index"
                 @click="cutTabClick($event,index)">{{item.name}}</div>
          </div>
        </div>
        <div class="content-phon">*需求岗位</div>
        <!-- 表单数据列表 -->
        <van-form @submit="onSubmit"
                  ref="fromtable">
          <van-field label="*手机号码："
                     type="Number"
                     name='phon'
                     v-model="ConstentList.phon"
                     :rules="userFormRules.phon" />
          <van-field label="年龄："
                     type="Number"
                     name='age'
                     v-model="ConstentList.age"
                     :rules="userFormRules.age" />
          <van-field label="薪资："
                     type="Number"
                     name='pay'
                     v-model="ConstentList.pay"
                     :rules="userFormRules.pay" />
          <van-field label="联系人："
                     type="Number"
                     name='linkman'
                     v-model="ConstentList.linkman"
                     :rules="userFormRules.linkman" />
          <van-field label="籍贯要求："
                     name='native'
                     v-model="ConstentList.native"
                     :rules="userFormRules.native" />
          <van-field label="工作地点："
                     name='place'
                     v-model="ConstentList.place"
                     :rules="userFormRules.place" />
          <div style="margin: 16px;">
            <van-button round
                        block
                        type="info"
                        native-type="submit"
                        :disabled='tijiao'>
                        提交资料
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
// 导入mock
import '@/mock/libin-mock.js'

// 获取岗位列表
import { getContentList } from '@/api/home'

// 提交内容数据
import { MyAuthentication } from '@/api/MyAuthentication'
export default {
  name: 'HomeHousekeeping',
  components: {},
  props: {},
  data () {
    return {
      content: [], // 所有内容
      message: '',
      tijiao: false,
      // 岗位列表
      ConstentList: {
        phon: '',
        age: '',
        pay: '',
        linkman: '',
        native: '',
        place: ''
      },
      // 表格验证
      userFormRules: {
        // 验证手机号
        phon: [{
          required: true, message: '未输入手机号'
        }, {
          pattern: /0?(13|14|15|18|17)[0-9]{9}/,
          message: '手机号格式错误'
        }],
        // 验证地址
        place: [{
          required: true, message: '请填写工作地点'
        }, {
          pattern: /[\u4e00-\u9fa5]/,
          message: '格式有错误请重新填写'
        }],
        // 验证籍贯
        native: [{
          required: true, message: '请填写籍贯'
        }, {
          pattern: /[\u4e00-\u9fa5]/,
          message: '籍贯错误'
        }],
        // 验证联系人
        linkman: [{
          required: true, message: '请填写联系人'
        }, {
          pattern: /0?(13|14|15|18|17)[0-9]{9}/,
          message: '格式有错误请重新填写'
        }],
        // 验证年龄
        age: [{
          required: true, message: '请填写您的年龄'
        }],
        // 验证薪资
        pay: [{
          required: true, message: '请填写薪资'
        }],
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    this.getHousekeepingList()
  },
  mounted () { },
  methods: {
    // 点击高亮显示
    cutTabClick (e, index) {
      if (e.target.className.indexOf('actiove') === -1) {
        e.target.className = 'content-seek-list actiove'
      } else {
        e.target.className = 'content-seek-list'
      }
    },
    submit () {

    },
    // 获取家政列表
    async getHousekeepingList () {
      try {
        const data = await getContentList()
        this.content = data.data
        console.log(data)
      } catch (err) {
        this.$toast('获取数据列表失败')
      }
    },
    // 获取岗位列表
    async onSubmit (values) {
      console.log('submit', values)
      try {
        await this.$refs.fromtable.validate('phon')
        this.$toast('提交成功！')
        // 清除岗位列表数据
        this.ConstentList = ''
      } catch (err) {
        return console.log('获取数据列表失败', err)
      }
      // try {
      // console.log('submit', values)
      //   await MyAuthentication(datastr)
      //   // this.ConstentList = datastr.data
      //   console.log(this.ConstentList)
      // } catch (err) {
      //   this.$toast('获取数据列表失败')
      // }
    }
  },
}
</script>

<style lang="less" scoped>
body {
  // 去除页面的滚动条
  overflow: scroll;
  overflow-x: hidden;
}
.home-housekeeping {
  position: relative;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  .big {
    overflow: hidden;
  }
  .mint-header {
    height: 120px;
    background-color: #1196db;
    .nav-serve {
      font-size: 32px;
      margin-left: 15px;
    }
  }

  .content {
    position: absolute;
    left: 0;
    top: 92px;
    z-index: 2;
    width: 700px;
    height: 900px !important;
    margin-left: 28px;
    // padding-top: 100px;
    background-color: #fff;
    border-radius: 3%;
    margin-bottom: 80px;

    /deep/.mint-cell-title {
      font-size: 25px !important;
      padding-bottom: 40px;
      margin-top: 50px;
    }

    .content-phon {
      font-size: 25px;
      margin-top: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid #f0f0f0;

      input {
        width: 550px;
        height: 70px;
        border: 0;
        outline: none;
      }
    }

    .content-seek {
      display: inline;
      border: 1px solid #1196db;
      background-color: #1196db;
      padding: 0 3px 0 0;
      margin: 0 20px 0 20px;
    }
    .content-option {
      padding-top: 20px;

      /deep/.content-seek-list {
        display: inline-block;
        width: 125px;
        height: 30px;
        border: 1px solid #ccc;
        border-radius: 40px;
        text-align: center;
        margin-left: 35px;
        color: #979191;
        margin-top: 25px;
        color: #b5b1b1 100%;
        line-height: 100%;
      }
    }

    .content-btn {
      margin-right: 15px;
    }
  }

  .van-button {
    background-color: #1196db;
  }
}
.public {
  font-size: 25px;
  padding-bottom: 50px;
  margin-top: 50px;
  border-bottom: 1px solid #f0f0f0;
  width: 720px;

  .actiove {
    border-radius: 1px solid #1196db !important;
    color: #1196db !important;
  }
}
/deep/ .van-cell__value {
  display: flex;
  position: absolute;
  top: 20%;
  left: 25%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
